<template>
  <div class="footer">
    <input type="checkbox" class="item-checkbox" @click="checkAll">
    <span class="footer-text">已完成{{finish}}/ 全部{{all}}</span>
    <button class="btn btn-danger btn-lg" @click="deleteChecked">清除已完成任务</button>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
export default {
  name: 'to-do-footer',
  props: ['finish', 'all'],
  methods: {
    checkAll () {
      // this.$emit('checkAll')
      // 发布消息 相当于触发事件
      PubSub.publish('checkAll')
    },
    deleteChecked () {
      this.$emit('deleteChecked')
    }
  }
}
</script>

<style>
.footer {
  padding-left: 12px;
}
.footer-text {
  font-size: 25px;
  margin-left: 50px;
}
.btn {
  float: right;
}
.item-checkbox {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 !important;
}
</style>
